import React from 'react';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as Action from "../actions";

class Car extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const keepTwoDecimal=(num)=>{
            var result = parseFloat(num);
            result = Math.round(num * 100) / 100;
            return result;
        }
        return <div className="shoppingCar">
            <div className="carheader banner">
                <h3>已选菜品</h3>
                <span onClick={this.props.actions.clear}>清空全部菜品</span>
            </div>
            <div className="selcted">
                <ul>
                    {
                        this.props.shopcar.map((item, idx) => (
                            <li className="product" key={idx}>
                                <div className="banner">
                                    <h5>{item.name}</h5>
                                    <div className="info">
                                        <span className="jianbtn" onClick={()=>{this.props.actions.minus(item)}}>-</span>
                                        <p>{item.quantity}</p>
                                        <span className="jiabtn" onClick={()=>{this.props.actions.add(item)}}>+</span>
                                    </div>
                                    <span className="priceCount">￥{keepTwoDecimal(item.price*item.quantity)}</span>
                                </div>
                            </li>
                        ))
                    }
                </ul>
                {this.props.shoppingCar}
            </div>
        </div>
    }
}
export default connect(
    ({ foodReducer }) => {
        return {
            shopcar: foodReducer.shop
        }
    },
    (dispatch) => {
        return {
            actions: bindActionCreators(Action, dispatch)
        }
    }
)(Car)